<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <link href="../../static/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link href="../../static/css/slide-unlock.css" th:href="@{css/slide-unlock.css}" rel="stylesheet" type="text/css" />
    <script src="../../static/bootstrap-3.3.7/js/jquery-1.11.3.min.js" th:src="@{bootstrap-3.3.7/js/jquery-1.11.3.min.js}" type="text/javascript"></script>
    <script src="../../static/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{bootstrap-3.3.7/js/bootstrap.min.js}" type="text/javascript"></script>
    <script src="../../static/My97DatePicker/WdatePicker.js" th:src="@{My97DatePicker/WdatePicker.js}" type="text/javascript" ></script>
    <script src="../../static/js/jquery.slideunlock.js" th:src="@{js/jquery.slideunlock.js}" type="text/javascript" ></script>

    <style type="text/css">
        body{
            background-color: #ffffff;
        }

        .foot{
            position:relative;
            bottom:0;
            height: 100px;
            margin-top: 50px;
            padding-top: 30px;
            width: 100%;
            text-align:center;
            background-color: white;
            font-size: 12px;
        }

    </style>
</head>
<body>
<!--  	描述：导航条    -->
<nav class="navbar navbar-default" role="navigation" style="background-color: #ffffff; height: 80px;margin-bottom: 0px">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="">
                    <i style="display: inline-block;background-color: #5cb85c; width: 150px;height:50px; background: url(../../static/img/bg/piaodekuai.png) no-repeat center; background-size: 100px 50px; "></i>
                   <!-- <span style="color:#0652DD; font-size:30px;width: 30px;">飘得快</span>-->
                </a>
            </div>
            <!--<div class="nav navbar-nav" style="width: 80%;padding-top: 25px;padding-left: 80px">
                <a href=""><span style="float: left;font-size: 20px">首页&nbsp;</span></a>
                <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 30%;margin-top: 15px;"></div>
                <span style="color: #ffa801;float: left;font-size: 20px">&nbsp;&nbsp;登录中心</span>
            </div>-->
            <div class="nav navbar-nav navbar-right" style="padding-top: 25px; margin-right: 0px">
                <!--<span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                <span style="color: #1e272e;font-size: 15px" >登录</span>
                &nbsp;&nbsp;
                <a href="#">
                    <span class="fcolor glyphicon glyphicon-pencil" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >注册</span>
                </a>
                -->
            </div>
        </div>
    </div>
</nav>


<div class="container-fluid" style="width:1530px;height:480px; margin-top: 10px; background-image: url(../../static/img/bg/login_bg.jpg);background-repeat: no-repeat; background-size: 100% 100%;">
   <div class="row">
        <div class="col-md-7"></div>
        <div class="col-md-3" style="height: 80%; margin-top: 50px;background-color: #ffffff;">
            <div>
                <div class="row" style="padding: 20px 45px">
                        <form class="form-horizontal" role="form" action="/Home" method="post">
                            <div class="form-group" >
                                <div>
                                    <span style="font-size: 20px">飘得快账号登录</span>
                                </div>
                            </div>
                            <div class="form-group" >
                                <div >
                                    <input type="text" id="username" autocomplete="off" name="username" style="height: 38px" class="form-control"  placeholder="国内手机号/用户名/邮箱">
                                </div>
                            </div>
                            <div class="form-group" style="margin-bottom: 0px" >
                                <div>
                                    <input type="password" id="password" name="password" style="height: 38px" class="form-control"  placeholder="登录密码">
                                </div>
                            </div>
                            <div class="form-group" style="margin-bottom: 5px;">
                               <!-- <div>
                                    <input type="text" class="form-control"  placeholder="验证码">
                                </div>-->
                                <div id="demo" >
                                    <div id="slider" style="height: 38px; padding-top: 0px; padding-bottom: 0px;margin-bottom: 0px ">
                                        <div id="slider_bg"></div>
                                        <span id="label" style="border-radius: 7px;height: 38px">>></span> <span id="labelTip" style="height: 35px">拖动滑块验证</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" style="margin-bottom: 0px;" id="msg">
                          <!--      <div style="background-color:#F8EFBA; padding-left: 5px; border: 1px solid #7f8fa6">
                                    <span class="glyphicon glyphicon-remove" style="color: #e84118; font-size: 8px"></span>
                                    <span  style="font-size: 11px; color: #636e72">账号或密码错误!</span>
                                </div>-->
                            </div>
                            <div class="form-group" >
                                <div class="checkbox" style="font-size: 13px">
                                    <!--<label>
                                        <input type="checkbox">30天内自动登录
                                    </label>-->
                                    <span style="float: right">
                                        <a href="#" style="display: inline-block; ">忘记密码？</a>
                                        &nbsp;
                                        <a href="/register" style="display: inline-block; ">免费注册</a>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group" style="padding-bottom: 0px; ">
                                <input class="btn-block btn btn-warning" id="login" type="submit" name="submit"  value="登&nbsp;&nbsp;录" >
                            </div>
                            <div style="font-size: 12px; text-align: center;">
                                <span style="color: #718093">
                                    登录即代表您同意我们的
                                    <a href="" style="color: #718093">服务协议</a>
                                    和
                                    <a href="" style="color: #718093">隐私政策</a>
                                </span>
                            </div>
                        </form>
                </div>
            </div>
        </div>
    </div>
</div>




<div class="foot">
    <p>网站导航 | 宾馆索引 | 用户协议 | 关于携程 | 企业公民 | 诚聘英才 | 分销联盟 | 企业礼品卡采购 | 代理合作 | 广告业务 | 联系我们 | 返回旧版</p>
    <span>Copyright © 2019-2019, 第九组 All rights reserved.</span>
</div>

<script>
    var i = 0 ;
    $(function () {
        var slider = new SliderUnlock("#slider",{
            successLabelTip : "验证成功"

        },function(){
            /* alert("验证成功,即将跳转至bootstrap模板库");
             window.location.href="http://www.bootstrapmb.com";*/
            //以下四行设置恢复初始，不需要可以删除
            //setTimeout(function(){
            //$("#labelTip").html("拖动滑块验证");
            // $("#labelTip").css("color","#787878");
            //},2000);
            //slider.init();
            i = 1 ;
            //alert(sli);
            //alert( $("#username").val());
        });
        slider.init();



        $("#login").click(function(){

            if($("#username").val() == "" || $.trim($("#username").val()).length == 0){
                //alert("不能为空！");
                $("#msg").html("        <div style=\"background-color:#F8EFBA; padding-left: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                                    <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                                    <span  style=\"font-size: 11px; color: #636e72\">请输入用户名!</span>\n" +
                    "                                </div>");
                return false; //如果验证不通过，则不执行后面
            }else if ($("#password").val() == "" || $.trim($("#password").val()).length == 0) {
                $("#msg").html("        <div style=\"background-color:#F8EFBA; padding-left: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                                    <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                                    <span  style=\"font-size: 11px; color: #636e72\">请输入登录密码!</span>\n" +
                    "                                </div>");
                return false; //如果验证不通过，则不执行后面
            }else if (i != 1) {
                $("#msg").html("        <div style=\"background-color:#F8EFBA; padding-left: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                                    <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                                    <span  style=\"font-size: 11px; color: #636e72\">请拖动滑块验证!</span>\n" +
                    "                                </div>");
                return false; //如果验证不通过，则不执行后面
            }else {
                throw SyntaxError();
            }

        });



    })



</script>

</body>
</html>